<template>
	<view class="orderDetail" v-if="form.id">
		<view class="order-status-wrapper">
			<image v-if="form.status === 1" src="https://cdpresources.hobon.cc/city-warehouse-app/static/audit.png"
				mode="widthFix" class="icon"></image>
			<image v-else-if="form.status === 2" src="https://cdpresources.hobon.cc/city-warehouse-app/static/audit.png"
				mode="widthFix" class="icon"></image>
			<image v-else-if="form.status === 3" src="https://cdpresources.hobon.cc/city-warehouse-app/static/audit.png"
				mode="widthFix" class="icon">
			</image>
			<image v-else-if="form.status === 4"
				src="https://cdpresources.hobon.cc/city-warehouse-app/static/confirm.png" mode="widthFix" class="icon">
			</image>
			<image v-else-if="form.status === 5" src="https://cdpresources.hobon.cc/city-warehouse-app/static/audit.png"
				mode="widthFix" class="icon">
			</image>
			<image v-else-if="form.status === 6"
				src="https://cdpresources.hobon.cc/city-warehouse-app/static/waitPay.png" mode="widthFix" class="icon">
			</image>
			<image v-else-if="form.status === 7"
				src="https://cdpresources.hobon.cc/city-warehouse-app/static/inGroupCancel.png" mode="widthFix"
				class="icon">
			</image>
			<image v-else-if="form.status === 8"
				src="https://cdpresources.hobon.cc/city-warehouse-app/static/inGroupCancel.png" mode="widthFix"
				class="icon">
			</image>
			<image v-else-if="form.status === 9"
				src="https://cdpresources.hobon.cc/city-warehouse-app/static/tradeSuccess.png" mode="widthFix"
				class="icon">
			</image>
			<view class="info-wrapper">
				<view class="status">
					<text>{{ statusList[form.status].name }}</text>
				</view>
				<view v-if="form.status != 8" class="info">
					{{ statusList[form.status].tip }}
				</view>
				<view v-else class="info">
					客户已于{{ form.statusTime.substring(0,10) }}撤销的本次售后申请
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="title-wrapper">
				<view class="title">
					订单信息
				</view>
			</view>
			<view class="item">
				<view class="label">
					供应商：
				</view>
				<view class="value">
					{{ form.supplierName }} {{ form.supplierTel }}
				</view>
			</view>
			<view class="item" @click="goProductDetail">
				<view class="label">
					品名：
				</view>
				<view class="value">
					{{ form.productName }}
				</view>
				<uni-icons type="right" size="18" class="#888888"></uni-icons>
			</view>
			<view class="item">
				<view class="label">
					货号：
				</view>
				<view class="value">
					{{ form.productCode }}
				</view>
			</view>
			<view class="item">
				<view class="label">
					客户：
				</view>
				<view class="value">
					{{ form.customerPetName }} {{ form.customerTel }}
				</view>
			</view>
			<view class="item">
				<view class="label">
					下单时间：
				</view>
				<view class="value">
					{{ form.orderTime }}
				</view>
			</view>
			<view class="item">
				<view class="label">
					下单件数：
				</view>
				<view class="value">
					{{ form.quantity }}件
				</view>
			</view>
			<view class="item">
				<view class="label">
					实配件数：
				</view>
				<view class="value">
					{{ form.actualQuantity }}件
				</view>
			</view>
			<view class="item">
				<view class="label">
					销售单价：
				</view>
				<view class="value">
					{{ form.price }}元/件
				</view>
			</view>
			<view class="item">
				<view class="label">
					实付金额：
				</view>
				<view class="value">
					{{ form.productPayment }}元
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="title-wrapper">
				<view class="title">
					售后申请
				</view>
			</view>
			<view class="item">
				<view class="label">
					申请时间
				</view>
				<view class="value">
					{{ form.applyTime }}
				</view>
			</view>
			<view class="item">
				<view class="label">
					申请原因
				</view>
				<view class="value">
					{{ form.reasonIi || form.reason }}
				</view>
			</view>
			<view class="item">
				<view class="label">
					缺损件数
				</view>
				<view class="value">
					<text>{{ form.lossNum }}件</text>
				</view>
			</view>
			<view class="item">
				<view class="label">
					缺损重量(净重)
				</view>
				<view class="value">
					<text>{{ form.lossWeight }}斤</text>
				</view>
			</view>
			<view class="item">
				<view class="label">
					预估退款
				</view>
				<view class="value">
					<text>{{ form.estimatedRefund }}元</text>
				</view>
			</view>
			<view class="item">
				<view class="label">
					申请退款
				</view>
				<view class="value">
					<text>{{ form.applyRefund }}元</text>
				</view>
			</view>
			<view class="item" v-if="form.status === 9">
				<view class="label">
					退款金额
				</view>
				<view class="value">
					<text>{{ form.refundAmount || 0 }}元</text>
				</view>
			</view>
			<view class="item">
				<view class="label">
					具体描述
				</view>
				<view class="value">
					<text>{{ form.afterSalesDesc }}</text>
				</view>
			</view>
			<view class="reason-wrapper" v-if="form.afterSalesImage">
				<view class="images-list">
					<view class="image-item" v-for="(item,index) in form.afterSalesImage" :key="index"
						@click="openReasonImage(item,index)">
						<image :src="item.url+(item.type === 1 ? '?vframe/jpg/offset/1':'?imageView2/3/w/300/q/100')"
							class="reason-image" mode="aspectFill"></image>
						<image v-if="item.type === 1" src="../../../../assets/images/index/play.png" class="playImage"
							mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="title-wrapper">
				<view class="title">
					售后结果
				</view>
			</view>
			<view class="audit-wrapper">
				<view v-if="currentResult.type === 'apply'" class="audit-item">
					<view class="audit-title">
						{{ currentResult.node }}：{{ currentResult.approvalTime }}
					</view>
					<view class="audit-result" style="padding-left: 0;">
						申请人：{{ currentResult.startBy }}
					</view>
				</view>
				<view v-else class="audit-item">
					<view class="audit-title">
						{{ currentResult.node }}：{{ currentResult.approvalTime }}
					</view>
					<view class="audit-result" style="padding-left: 0;">
						审核结果：{{ currentResult.result }}
					</view>
					<view class="audit-option" style="padding-left: 0;" v-if="currentResult.opinion">
						具体意见：{{ currentResult.opinion || '-' }}
					</view>
					<view v-if="currentResult.tips" style="padding-left: 0;" class="audit-tip">
						系统提示：{{ currentResult.tips }}
					</view>
				</view>
			</view>
		</view>

		<view class="form-wrapper" v-if="form.afterSalesApproval">
			<view class="title-wrapper">
				<view class="title">
					售后追踪
				</view>
			</view>
			<view class="audit-wrapper">
				<view v-for="(item,index) in form.afterSalesApproval" :key="index">
					<view v-if="item.type === 'order'" class="audit-item">
						<view class="audit-title">
							{{ index + 1 }}、{{ item.node }}：{{ item.approvalTime }}
						</view>
						<view class="audit-result">
							下单件数：{{ item.quantity }}件
						</view>
						<view class="audit-option">
							商品金额：{{ item.price }}
						</view>
						<view class="audit-option">
							支付时间：{{ item.payTime }}
						</view>
					</view>
					<view v-else-if="item.type === 'pickup'" class="audit-item">
						<view class="audit-title">
							{{ index + 1 }}、{{ item.node }}：{{ item.approvalTime }}
						</view>
						<view class="audit-result">
							城市仓：{{ item.pickupName }}
						</view>
						<view class="audit-option">
							地址：{{ item.pickupAddress || '-' }}
						</view>
					</view>
					<view v-else-if="item.type === 'apply'" class="audit-item">
						<view class="audit-title">
							{{ index + 1 }}、{{ item.node }}：{{ item.approvalTime }}
						</view>
						<view class="audit-result">
							申请人：{{ item.startBy }}
						</view>
					</view>
					<view v-else class="audit-item">
						<view class="audit-title">
							{{ index + 1 }}、{{ item.node }}：{{ item.approvalTime }}
						</view>
						<view class="audit-result">
							审核结果：{{ item.result }}
						</view>
						<view class="audit-option" v-if="item.opinion">
							具体意见：{{ item.opinion || '-' }}
						</view>
						<view v-if="item.tips" class="audit-tip">
							系统提示：{{ item.tips }}
						</view>
					</view>
					<view class="line"
						v-if="form.afterSalesApproval.length > 1 && index !== form.afterSalesApproval.length - 1">
					</view>
				</view>
			</view>
		</view>

		<view v-if="form.status == 9" class="tip-wrapper">
			本次售后已结束，如有任何问题请联系平台官方客服。
		</view>

		<view class="btn-box" v-if="form.status === 2">
			<button type="primary" size="mini" class="btn primary" @click.stop="audit">审核</button>
		</view>

		<uni-popup ref="popup">
			<view class="popup-wrapper">
				<view class="popup-title-wrapper">
					<text class="title">城市仓审核</text>
				</view>
				<view class="popup-result">
					<view class="label">
						审核结果
					</view>
					<view class="popup-result-wrapper">
						<view class="popup-result-item" @tap="changeAudit('PASS')">
							<uni-icons v-if="result === 'PASS'" type="checkbox-filled" color="#F26022"
								size="22"></uni-icons>
							<uni-icons v-else type="circle" color="#ababab" size="22"></uni-icons>
							<text>通过：同意退款{{ form.applyRefund }}元</text>
						</view>
						<view class="popup-result-item" @tap="changeAudit('REJECT')">
							<uni-icons v-if="result !== 'PASS'" type="checkbox-filled" color="#F26022"
								size="22"></uni-icons>
							<uni-icons v-else type="circle" color="#ababab" size="22"></uni-icons>
							<text>驳回：不同意该售后申请</text>
						</view>
					</view>
				</view>
				<view class="popup-content-wrapper">
					<view class="label-wrapper">
						<text>具体意见</text>
						<text class="small">{{ reason.length }}/100</text>
					</view>
					<textarea class="textarea" focus v-model="reason" placeholder="输入具体审核意见" maxlength="100"></textarea>
				</view>
				<view class="popup-btn-wrapper">
					<view class="btn" @click="closeAudit">
						取消本次操作
					</view>
					<view class="btn primary" @click="confirmAudit">
						提交审核
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				form: {},
				statusList: [{}, {
						name: '平台审核中',
						tip: '平台客服正在处理该售后申请，请耐心等待!'
					},
					{
						name: '城市仓审核中',
						tip: '该售后申请正在等待您进行审核!'
					},
					{
						name: '供应商审核中',
						tip: '供应商正在审核售后申请，请耐心等待'
					},
					{
						name: '客户确认',
						tip: '该售后申请正在等待客户确认!'
					},
					{
						name: '平台介入中',
						tip: '平台客服正在处理该售后申请，请耐心等待'
					},
					{
						name: '退款中',
						tip: '当前订单退款中，请耐心等待'
					},
					{
						name: '已拒绝',
						tip: '售后申请已被拒绝，详见售后结果'
					},
					{
						name: '已撤销',
						tip: '您已于2023年8月26日撤销的本次售后申请'
					},
					{
						name: '已完成',
						tip: '售后申请已处理完成，详见售后追踪'
					},
				],
				//statusList: ['', '非常差', '差', '一般', '好', '非常好'],
				evaluationList: [], // 评价列表
				result: 'PASS',
				reason: '',
				currentResult: {}
			}
		},
		onLoad(option) {
			this.id = option.id;
			//this.role = option.role;
		},
		onShow() {
			this.getData()
			//this.getEvaluation()
		},
		computed: {

		},
		methods: {
			async getData() {
				const data = await this.$api.get('/app/after-sales/getInfo', {
					id: this.id
				}, false);
				if (data.code === 200) {
					if (data.data.afterSalesImage) {
						data.data.afterSalesImage = JSON.parse(data.data.afterSalesImage)
					}
					let afterSalesApproval = [{
						node: '下单订货',
						approvalTime: data.data.orderTime,
						type: 'order',
						quantity: data.data.quantity,
						price: data.data.price + '元/件',
						payTime: data.data.payTime
					}, {
						node: '提货核销',
						approvalTime: data.data.deliverOrder.deliverTime,
						type: 'pickup',
						pickupName: data.data.deliverOrder.pickupPointName,
						pickupAddress: data.data.deliverOrder.pickupPointAddress
					}, {
						node: '申请售后',
						approvalTime: data.data.applyTime,
						type: 'apply',
						startBy: data.data.startBy == 'CUSTOMER' ? '客户' : '城市仓',
					}];
					if (data.data.afterSalesApproval) {
						let arr = JSON.parse(data.data.afterSalesApproval);
						afterSalesApproval.push(...arr)

					}
					this.currentResult = afterSalesApproval[afterSalesApproval.length - 1];
					data.data.afterSalesApproval = afterSalesApproval;
					this.form = data.data;
				}
			},
			openReasonImage(item, index) {
				if (item.type === 1) {

				} else {
					const urls = this.form.afterSalesImage.map(row => {
						if (row.type === 1) {
							row.url += '?vframe/jpg/offset/1'
						}
						return row.url
					})
					uni.previewImage({
						urls: urls,
						index: index
					})
				}
			},
			goProductDetail() {
				uni.navigateTo({
					url: '/subPage_product/productSnapshot?id=' + this.form.snapshotId
				})
			},
			audit() {
				this.reason = '售后申请基本属实，请供应商审核处理';
				this.result = 'PASS';
				this.$refs.popup.open('center')
			},
			closeAudit() {
				this.$refs.popup.close();
			},
			changeAudit(type) {
				this.result = type;
				if (this.result == 'PASS') {
					this.reason = "售后申请基本属实，请供应商审核处理";
				} else {
					this.reason = "客户提交的售后理由，所拍摄的图片/视频，不能完整体现出售后申请的情况，建议按照要求修改或拍摄后，重新申请";
				}
			},
			async confirmAudit() {
				if (!this.reason && this.result !== 'PASS') {
					uni.showToast({
						title: '请输入审核意见~',
						icon: 'none'
					})
					return
				}
				const data = await this.$api.post('/app/after-sales/cityExamine', {
					result: this.result,
					opinion: this.reason,
					id: this.form.id
				})
				if (data.code === 200) {
					this.closeAudit()
					uni.showToast({
						title: '已审核~'
					})
					setTimeout(() => {
						this.getData()
						let pages = getCurrentPages()
						let prePage = pages[pages.length - 2];
						if (prePage === 'subPage_afterSale/index') {
							prePage.$vm.refresh();
						}
					}, 1000)
				}
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.orderDetail {
		height: 100%;
		overflow: auto;
		padding-bottom: 150upx;

		.order-status-wrapper {
			background-color: #F26022;
			display: flex;
			align-items: center;
			padding: 40upx 0;

			.icon {
				width: 112upx;
				height: 112upx;
				margin: 0 26upx 0 52upx;
			}

			.info-wrapper {
				flex: 1;

				.status {
					font-size: 40upx;
					color: #ffffff;
					line-height: 40upx;
					display: flex;

					.time {
						margin-left: 30upx;
						display: flex;
						font-size: 30upx;
						align-items: center;
					}
				}

				.info {
					font-size: 26upx;
					color: #ffffff;
					margin-top: 20upx;
					padding-right: 30upx;
				}
			}
		}

		.form-wrapper {
			background-color: #ffffff;
			border-radius: 20upx;
			margin: 20upx 20upx 0 20upx;
			padding-bottom: 14upx;
			overflow: hidden;

			.title-wrapper {
				height: 40upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 26upx 0;

				.title {
					color: #000000;
					font-weight: bold;
					font-size: 34upx;
					height: 34upx;
					line-height: 34upx;
					border-left: 10upx solid #F26022;
					padding-left: 18upx;

				}

				.edit {
					color: #F26022;
					font-size: 32upx;
					margin-right: 32upx;
				}
			}

			.item {
				display: flex;
				align-items: center;
				font-size: 32upx;
				line-height: 32upx;
				padding: 0 32upx;
				margin-bottom: 26upx;
				position: relative;

				.label {
					position: absolute;
					top: 0;
					color: #5B5B5B;
					margin-right: 30upx;
				}

				.value {
					color: #313131;
					flex: 1;
					text-align: right;
					margin-left: 180upx;

					.icon {
						position: relative;
						top: 2upx;
					}

					.placeholder {
						color: #999999;
					}

					.btn {
						color: #F26022;
						margin-left: 20upx;
					}
				}

				.item-tip {
					flex: 1;
					border-radius: 10upx;
					background-color: #f5f5f5;
					color: #FF5733;
					font-size: 28upx;
					padding: 20upx 20upx;
					line-height: 34upx;
				}
			}

			.reason-wrapper {
				padding: 20upx 32upx 0 32upx;
				overflow: hidden;

				.text {
					color: #232323;
					margin-top: 20upx;
				}

				.images-list {
					margin-top: 10upx;
					display: flex;
					flex-wrap: wrap;

					.image-item {
						width: 205upx;
						height: 205upx;
						margin-right: 20upx;
						margin-bottom: 20upx;
						border-radius: 10upx;
						overflow: hidden;
						position: relative;

						&:nth-child(3n) {
							margin-right: 0;
						}
					}

					.reason-image {
						width: 205upx;
						height: 205upx;
					}
				}
			}

			.line {
				height: 2upx;
				background-color: #E5E5E5;
				margin: 36upx 32upx 36upx 32upx;
			}

			.audit-wrapper {

				.audit-item {
					margin-bottom: 20rpx;
					padding: 0 30upx;
					font-size: 32upx;

					.audit-title {
						margin-bottom: 10rpx;
					}

					.audit-result {
						padding-left: 50rpx;
					}

					.audit-option {
						padding-left: 50rpx;
						margin-top: 10rpx;
					}

					.audit-tip {
						padding-left: 50rpx;
						margin-top: 10rpx;
						color: #FF5733;
					}
				}
			}
		}

		.evaluate-wrapper {
			background-color: #ffffff;
			border-radius: 20upx;
			margin: 20upx 20upx 0 20upx;
			padding-bottom: 14upx;
			overflow: hidden;

			.title-wrapper {
				height: 40upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 26upx 0;

				.title {
					color: #000000;
					font-weight: bold;
					font-size: 34upx;
					height: 34upx;
					line-height: 34upx;
					border-left: 10upx solid #F26022;
					padding-left: 18upx;

				}
			}

			.content-wrapper {
				padding: 0 32upx 32upx 32upx;

				.buyer-info {
					display: flex;
					align-items: center;

					.avatar {
						width: 80upx;
						height: 80upx;
						border-radius: 50%;
						margin-right: 20upx;
					}

					.info {
						.title {
							font-size: 32upx;
							color: #2B2B2B;
						}

						.date {
							font-size: 28upx;
							color: #777777;
						}
					}
				}

				.score-wrapper {
					margin: 20upx 0;
					display: flex;
					align-items: center;
					font-size: 28upx;
					color: #777777;

					.text {
						margin-left: 14upx;
					}
				}

				.added {
					margin-top: 20upx;
					color: #ff8800;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.evaluate-content {
					.text {
						font-size: 32upx;
						color: #2B2B2B;
					}

					.images-wrapper {
						display: flex;
						flex-wrap: wrap;
						margin-top: 20upx;

						.evaluate-image {
							position: relative;
							width: 32%;
							height: 206upx;
							border-radius: 20upx;
							overflow: hidden;
							margin-left: 2%;
							margin-bottom: 20upx;

							&:nth-child(3n+1) {
								margin-left: 0;
							}
						}
					}
				}

				.seller-reply {
					margin-top: 20upx;
					background-color: #F2F4FA;
					border-radius: 10upx;
					padding: 14upx;
					font-size: 28upx;
					color: #444444;

					.title {
						color: #313131;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}

					.images-wrapper {
						display: flex;
						flex-wrap: wrap;
						margin-top: 20upx;

						.evaluate-image {
							position: relative;
							width: 32%;
							height: 206upx;
							border-radius: 20upx;
							overflow: hidden;
							margin-left: 2%;
							margin-bottom: 20upx;

							&:nth-child(3n+1) {
								margin-left: 0;
							}
						}
					}
				}
			}

			.btn {
				width: 100upx;
				height: 56upx;
				border: 2upx solid #F26022;
				border-radius: 10upx;
				color: #F26022;
				font-size: 28upx;
				margin: 32upx 32upx 32upx 0;
				float: right;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: .1s linear;

				&:active {
					background-color: #F2602222;
				}
			}

			.no-evaluate {
				.text {
					margin: 0 32upx;
					color: #444444;
				}

				.btn {
					float: none;
					margin: 30upx auto;
					width: 300upx;
				}
			}
		}

		.products-wrapper {
			background-color: #ffffff;
			border-radius: 20upx;
			margin: 20upx 20upx 0 20upx;
			padding-bottom: 34upx;
			overflow: hidden;

			.title-wrapper {
				height: 40upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 26upx 0;

				.title {
					color: #000000;
					font-weight: bold;
					font-size: 34upx;
					height: 34upx;
					line-height: 34upx;
					border-left: 10upx solid #F26022;
					padding-left: 18upx;

				}

				.edit {
					color: #F26022;
					font-size: 32upx;
					margin-right: 32upx;
				}
			}

			.info-wrapper {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 32upx;

				.info {
					font-size: 32upx;
					color: #5B5B5B;
				}

				.name {
					word-break: break-all;
					font-size: 34upx;
					color: #212121;
				}

				.contact {
					display: flex;
					color: #F26022;
					align-items: center;
					white-space: nowrap;
					margin-left: 10upx;

					.message-wrapper {
						width: 40upx;
						height: 40upx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #EDFAF5;
						border-radius: 50%;
						margin-right: 12upx;

						.message-icon {
							position: relative;
							top: -2upx;
						}
					}
				}
			}

			.products-list {
				.product {
					padding: 0 32upx;
					display: flex;
					margin-top: 20upx;

					.icon {
						width: 160upx;
						height: 160upx;
						border-radius: 20upx;
						margin-right: 22upx;
					}

					.product-info {
						background-color: #F2602211;
						padding: 20upx;
						border-radius: 10upx;
						flex: 1;

						.title {
							font-size: 32upx;
							color: #000000;
							//font-weight: bold; 
							line-height: 40upx;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden; //溢出内容隐藏
							text-overflow: ellipsis; //文本溢出部分用省略号表示
							display: -webkit-box; //特别显示模式
							-webkit-line-clamp: 2; //行数
							line-clamp: 2;
							-webkit-box-orient: vertical; //盒子中内容竖直排列 
						}

						.spec {
							font-size: 30upx;
							color: #5B5B5B;
							line-height: 30upx;
							margin-top: 14upx;
							display: flex;
							align-items: center;

							.trace {
								width: 130upx;
								height: 50upx;
								border: 1upx solid #F26022;
								border-radius: 10upx;
								color: #F26022;
								font-size: 28upx;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-left: 60upx;
							}
						}

						.weight {
							font-size: 26upx;
							color: #5B5B5B;
							line-height: 30upx;

							.item {
								margin-top: 8rpx;
							}
						}

						.price-wrapper {
							margin-top: 24upx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 30upx;
							line-height: 30upx;

							.price {
								color: #F26022;
								font-size: 34rpx;
							}

							.quantity {
								color: #F26022;

								&.return {
									color: #FF8D1A;
								}
							}
						}

						.tip {
							color: #FF8D1A;
							font-size: 28upx;

							&.first {
								margin-top: 20upx;
							}
						}
					}
				}
			}

			.recommend-wrapper {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: #5B5B5B;
				padding: 0upx 32upx;
				margin-top: 20upx;
			}

			.remark {
				background-color: #F2F4FA;
				margin: 48upx 32upx 0upx 32upx;
				padding: 26upx;
				color: #2B2B2B;
			}
		}

		.tip-wrapper {
			font-size: 32rpx;
			color: #444444;
			text-align: center;
			margin: 30rpx;
			text-align: left;
		}

		.btn-box {
			height: 108upx;
			position: fixed;
			background-color: #ffffff;
			width: 100%;
			left: 0;
			bottom: 0;
			display: flex;
			padding: 0 32upx;
			box-shadow: 0 0 10upx 0 #cecece;
			box-sizing: border-box;

			.btn {
				margin-top: 16upx;
				height: 76upx;
				flex: 1;
				border-radius: 40upx;
				font-size: 28upx;
				margin-right: 20upx;
				display: flex;
				align-items: center;
				justify-content: center;

				&:last-child {
					margin-right: 0;
				}

				&.default {
					border-color: #B8B8B8;
					color: #5B5B5B;

					&:active {
						background-color: #E3E3E3;
						border-color: #E3E3E3;
					}
				}

				&.plain {
					background-color: #ffffff;
					border: 2upx solid #F26022;
					color: #F26022;

					&:active {
						background-color: #F2602266;
					}
				}

				&.primary {
					background-color: #F26022;

					&:active {
						opacity: 0.7;
					}
				}

				&.disabled {
					background-color: #cecece !important;
				}

			}
		}

		.popup-wrapper {
			background-color: #ffffff;
			width: 690upx;
			height: 640upx;
			border-radius: 20upx;
			overflow: hidden;
			position: relative;

			.popup-title-wrapper {
				text-align: center;
				position: relative;
				margin: 30upx 0;

				.title {
					font-size: 36upx;
				}

				.close {
					position: absolute;
					right: 30upx;
				}
			}

			.popup-result {
				margin: 0 30upx;
				display: flex;
				border-bottom: 1upx solid #dfdfdf;
				padding-bottom: 30upx;
				margin-bottom: 15rpx;

				.label {
					color: #212121;
					width: 150rpx;
					font-size: 32rpx;
				}

				.popup-result-wrapper {
					flex: 1;

					.popup-result-item {
						display: flex;
						align-items: center;
						font-size: 32rpx;

						&:first-child {
							margin-bottom: 10rpx;
						}
					}
				}

			}

			.popup-content-wrapper {
				margin: 20upx 30rpx;

				.label-wrapper {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
					color: #212121;
					font-size: 32rpx;

					.small {
						font-size: 26rpx;
					}
				}

				.textarea {
					width: 630upx;
					height: 160upx;
					box-sizing: border-box;
					font-size: 32rpx;
				}
			}

			.popup-btn-wrapper {
				position: absolute;
				bottom: 0;
				height: 100upx;
				width: 100%;
				display: flex;
				align-items: center;
				border-top: 1upx solid #efefef;

				.btn {
					height: 100upx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #212121;
					flex: 1;
					font-size: 32upx;

					&:first-child {
						border-right: 1upx solid #efefef;
					}

					&.primary {
						color: #F26022;
					}
				}
			}
		}

		.refund-wrapper {
			padding: 0 20upx;

			.reason-wrappers {
				padding: 20upx 13upx 0 13upx;
				border-top: 1upx solid #efefef;

				&:first-child {
					padding-top: 0;
					border-top: 0;
				}

				.reason-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #313131;
					line-height: 38upx;
					margin-bottom: 20upx;
					font-size: 32upx;

					.label {
						color: #5B5B5B;
					}

					.status {
						color: #666666;
					}

					.processing {
						color: red;
					}

					.success {
						color: #F26022;
					}
				}
			}
		}

		.popup-date-wrapper {
			height: 600upx;
			width: 100%;
			background-color: #ffffff;
			border-radius: 20upx 20upx 0 0;
			overflow: hidden;

			.title-wrapper {
				height: 88upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 32upx;
				background-color: #f5f5f5;
			}

			.item-wrapper {
				display: flex;
				flex-wrap: wrap;
				padding: 32upx;

				.item {
					width: 120upx;
					height: 70upx;
					line-height: 70upx;
					text-align: center;
					background-color: #F6F6F6;
					margin-right: 20upx;
					border-radius: 10upx;
					margin-bottom: 20upx;

					&:nth-child(5n) {
						margin-right: 0;
					}
				}
			}
		}

		.popup-freight-wrapper {
			width: 650upx;
			background-color: #ffffff;
			height: 300upx;
			border-radius: 20upx;
			overflow: hidden;

			.title-wrapper {
				height: 100upx;
				display: flex;
				align-items: center;
				border-bottom: 1upx solid #cecece;
				padding-left: 32upx;
			}

			.input-wrapper {
				height: 112upx;
				padding: 15upx;
				box-sizing: border-box;

				.input {
					height: 80upx;
					width: 100%;
					background-color: #f1f1f1;
					text-align: center;
					border-radius: 10upx;
				}
			}

			.popup-btn-wrapper {
				display: flex;
				align-items: center;
				border-top: 1upx solid #cecece;

				.btn {
					height: 90upx;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #F26022;
					color: #ffffff;

					&.cancel {
						background-color: #ffffff;
						color: #2B2B2B;
					}
				}
			}
		}
	}
</style>